<template>
    <div class="left-menu">
        <ul>
            <li
                class="item"
                :class="{ 'is-active': index === currentIndex }"
                @click="selectItem(item, index)"
                v-for="(item, index) in liName"
                :key="index"
            >
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
import { auditType } from 'common/modul/audit.ts'

export default {
    data() {
        return {
            // 维护li元素名字和个数
            liName: auditType,
            currentIndex: 'CONTRACT' // 当前激活的li
        }
    },
    methods: {
        /**
         * 目的1：改变类名，改变样式
         * 目的2：向上抛出选择的目标
         */
        selectItem(item, index) {
            this.currentIndex = index
            // 抛出事件,携带audit对应的map对象
            this.$emit(
                'selectItem',
                new Map([
                    ['auditType', index],
                    ['auditName', item]
                ])
            )
        }
    }
}
</script>

<style lang="less" scoped>
.left-menu {
    padding-top: 30px;
    float: left;
    width: 160px;
    height: 100%;
    border-right: 1px solid #d9d9d9;
    .item {
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #485a6a;
        padding: 0 24px;
        cursor: pointer;
        position: relative;
        -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
        transition: border-color 0.3s, background-color 0.3s, color 0.3s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: nowrap;
        margin-right: -2px;
        &.is-active {
            border-right: 2px solid #2489f2;
            background-color: #f7f8f8;
        }
    }
}
</style>
